.TransitionModalPortal {
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background-color: transparent;
    z-index: 99999;
    .transition-modal-content {
        padding: 30px 40px;
        h3 {
            font-size: 20px;
            margin-bottom: 20px;
        }
        .buttons-container {
            text-align: center;
            margin-top: 20px;
            button {
                margin-left: 20px;
            }
        }
    }
}

.transition-modal {
    opacity: 0;
    transition: .3s;
    position: fixed;
    top: -1000px;
    left: -1000px;
    bottom: -1000px;
    right: -1000px;
    z-index: 9999;
    transform: scale(.86);
    &.open {
        opacity: 1;
        transform: scale(1);
    }
    .overlay {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        background: rgba(0, 0, 0, .7);
    }
    .modal-content {
        position: absolute;
        width: 1000px;
        height: 590px;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background: var(--dnn-color-background, #fff);
        overflow: hidden;
        .close {
            position: absolute;
            top: 4px;
            right: 6px;
            font-size: 46px;
            padding-right: 14px;
            cursor: pointer;
            width: 37px;
            &:hover {
                color: var(--dnn-color-background, #fff);
            }
        }
        .header {
            float: left;
            width: 100%;
            background: var(--dnn-color-primary-dark, #0c3b4f);
            padding: 20px;
            font-size: 20px;
        }
    }
}